<template>
  <!-- 类的样式 -->
  <!-- 1. 放置字符串 -->
  <h1 :style="msg">hello</h1>
  <h1 v-bind:style="msg">hello</h1>
  <!-- 2. 放置对象 -->
  <h1 :style="{background: 'purple'}">hello2</h1>
  <button @click="toggleActive">切换active</button>
  <!-- 3. 放置数组 -->
  <h1 :style="styleObj">hello3</h1>
  <!-- 4. 数组和对象结合 -->
  <h1 :style="[styleObj,{width:'500px'}]">hello4</h1>

</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      msg: 'background:red',
      styleObj: {
        // 如果遇到多个单词的组合,用引号
        // 也可以使用驼峰
        'background-color': 'pink',
        border: '1px solid blue',
        // backgroundColor: 'pink',
      }

    }
  },
  methods: {
    toggleActive() {
      this.styleObj["background-color"] = 'skyblue'
      // this.styleObj.backgroundColor = 'skyblue'
    }
  }
}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>